<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
    <style>
        select{
            min-width: 140px;
            padding: 4px;    
        }
    </style>
</head>
<body>
    <!-- 
        select 在JS中获取选择项的数据是通过 select-DOM 的 value 属性完成的;
            => option如果定义了value属性 select-DOM的value属性取值为选中的option的value值
            => option如果未义value属性 select-DOM的value属性取值为选中的option的内容值
            => select-DOM 的value操作可以直接改变页面的option选中
        option标签内不可以再增加其它任何标签
     -->
    <!-- <select id="selectDom">
        <option>请选择</option>
        <option>A</option>
        <option value="BBB">B</option>
        <option selected>C</option>
        <option>
            <h4>D</h4>
        </option>
    </select> -->
    <!-- select标签的html属性是没有value的 -->
    <!-- <select id="selectDom" value="C">
        <option>请选择</option>
        <option>A</option>
        <option value="BBB">B</option>
        <option>C</option>
        <option>
            <h4>D</h4>
        </option>
    </select> -->
    <hr>
    <div id="app">
        <pre v-pre class="note">
        v-model 为 v-bind 和 v-on 的语法糖操作，可以在页面开发时一次性完成属性和事件的同时绑定
            + v-model的属性绑定和v-bind存在细微操作差别
            + v-model的事件绑定和v-on存在细微操作差别
        
        v-model指令只能被应用于表单操作元素【input:text,input:radio,input:checkbox,textarea,select……】
        v-model指令对表单元素的操作行为，会因为不同功能的表单元素存在绑定差别
        v-model指令的=取值不能定义除变量以外的其它数据格式

        v-model 使用
            1、输入标签的操作
            2、选择标签的操作
        </pre>
        <h4>选择标签的v-model操作</h4>
        <h5>select下拉列表</h5>
        <pre>
            + v-model只能被用于 select 标签，不能被用于 option
        </pre>
        <p>selectValue：{{ selectValue }}</p>
        <!-- vue环境下 select 的value无论是静态还是动态绑定，操作的都是Dom的value -->
        <!-- <select value="C">
            <option>请选择</option>
            <option>A</option>
            <option value="BBB">B</option>
            <option>C</option>
            <option>
                <h4>D</h4>
            </option>
        </select>
        <br> -->
        <select :value="selectValue" @change="selectValue=$event.target.value">
            <option value="">请选择</option>
            <option>A</option>
            <option value="BBB">B</option>
            <option>C</option>
            <option>
                <h4>D</h4>
            </option>
        </select>
        <br>
        <select v-model="selectValue">
            <option value="">请选择</option>
            <option>A</option>
            <option value="BBB">B</option>
            <option>C</option>
            <option>
                <h4>D</h4>
            </option>
        </select>
    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {
                    selectValue:""
                }
            }
        }).mount("#app");
    </script>
</body>
</html>